<template>
  <!-- 饼图 -->
  <div :id="id" :style="{ height: height, width: width, }" />
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "80%",
    },
  },
  data() {
    return {
      chart: null,
    };
  },

  methods: {
    initChart(data) {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 20,
          top: 'center',
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "80%"],
            avoidLabelOverlap: false,
            // label: {
            //   show: false,
            // },
            // labelLine: {
            //   show: false,
            // },
            label: {
              normal: {
                formatter: '{b}\n{c}'
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value.toFixed(2);
              },
            },
            data: data
          }
        ]
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
